<template>
<el-container class="userAuthoriztion">
	<el-tabs class="el-over-auto tabs" style="width: 100%">
		<el-card class="box-card boxCard">
			<div slot="header" class="clearfix">
				<span>系统管理</span>
				<el-button type="primary" plain style="float: right;" @click="addSystem">新增 <i class="el-icon-plus"></i></el-button>
			</div>
			<div class="text item">
				<el-tag class="tag" closable size="medium" v-for="(val, index) in systemAuthorizationData" :key="index" @close="handleSystemClose(val.roleId)">{{val.roleName}}</el-tag>
			</div>
		</el-card>
		<el-divider></el-divider>
		<el-card class="box-card boxCard">
			<div slot="header" class="clearfix">
				<span>应用管理</span>
				<el-button type="primary" plain style="float: right;" @click="addApp">新增 <i class="el-icon-plus"></i></el-button>
			</div>
			<div class="text item">
				<el-tag class="tag" closable size="medium" v-for="(val, index) in appAuthorizationData" :key="index" @close="handleAppClose(val.roleId)">{{val.roleName}}</el-tag>
			</div>
		</el-card>
		<!-- <el-divider></el-divider>
		<el-card class="box-card boxCard">
			<div slot="header" class="clearfix">
				<span>项目管理</span>
				<el-button type="primary" plain style="float: right;" @click="addProject">新增 <i class="el-icon-plus"></i></el-button>
			</div>
			<div class="text item">
				<el-tag class="tag" closable size="medium" v-for="tag in dynamicTags" :key="tag" @close="handleClose(tag)">{{tag}}</el-tag>
			</div>
		</el-card> -->
		<el-divider></el-divider>
		<el-card class="box-card boxCard">
			<div slot="header" class="clearfix">
				<span>组织管理</span>
				<el-button type="primary" plain style="float: right;" @click="addOrganization">新增 <i class="el-icon-plus"></i></el-button>
			</div>
			<div class="text item">
				<el-tag class="tag" :title="val.roleFullName" closable size="medium" v-for="(val, index) in organizationAuthorizationData" :key="index" @close="handleOrganizationClose(val.roleId)">{{val.pcode?val.pcode+'/':''}}{{val.roleName}}</el-tag>
			</div>
		</el-card>
		<!-- <el-divider></el-divider>
		<el-card class="box-card boxCard">
			<div slot="header" class="clearfix">
				<span>应用中心</span>
				<el-button type="primary" plain style="float: right;" @click="addAppCenter">新增 <i class="el-icon-plus"></i></el-button>
			</div>
			<div class="text item">
				<el-tag class="tag" closable size="medium" v-for="(val, index) in appCenterAuthorizationData" :key="index" @close="handleAppCenterClose(val.sysId)">{{val.sysName}}</el-tag>
			</div>
		</el-card> -->
	</el-tabs>
	<div class="footer">
		<div class="btns">
			<el-button type="danger" @click="authorizationClose">
				关闭
				<i class="el-icon-close"></i>
			</el-button>
		</div>
	</div>
	<systemDialog :orgDate="systemAuthorizationData" @dialogHideSystem="dialogHandleSystem" @getCheckoutSystemData="getCheckoutSystemData" :dialogSystemVisible="dialogSystemVisible" :dialogSystemGroup="this.$route.params.userGroupId"></systemDialog>
	<appDialog :orgDate="appAuthorizationData" @dialogHideApp="dialogHandleApp" @getCheckoutAppData="getCheckoutAppData" :dialogAppVisible="dialogAppVisible" :dialogGroup="this.$route.params.userGroupId"></appDialog>
	<projectDialog @dialogHideProject="dialogHandleProject" @getCheckoutProjectData="getCheckoutProjectData" :dialogProjectVisible="dialogProjectVisible"></projectDialog>
	<organizationDialog  :key="organizationDialogKey" :orgDate="organizationAuthorizationData" @dialogHideOrganization="dialogHandleOrganization" :dialogOrganizationVisible="dialogOrganizationVisible" :dialogOrganizationGroup="this.$route.params.userGroupId"></organizationDialog>
	<appCenterDialog :orgDate="appCenterAuthorizationData" @dialogHideAppCenter="dialogHandleAppCenter" @dialogHideAppCenterData="dialogHideAppCenterData" :dialogAppCenterVisible="dialogAppCenterVisible" :dialogAppCenterGroup="this.$route.params.userGroupId"></appCenterDialog>
</el-container>
</template>

<script>
import systemDialog from './systemDialog'
import appDialog from './appDialog'
import projectDialog from './projectDialog'
import organizationDialog from './organizationDialog'
import appCenterDialog from './appCenterDialog'
import { Tree, Dialog, Table, TableColumn, MessageBox, Message, TabPane, Collapse, CollapseItem, Tag, Divider, Tabs } from 'element-ui'
import { userGroupRoleLis, userGroupDataAuthDelete, getSysList } from '@/api/authority/userAuthorization/userAuthorization.js'
export default {
	name: 'userGroupManage',
	components: {
    'el-tree': Tree, // 树形菜单
    'el-dialog': Dialog, // 对话框
    'el-table': Table, // 表格
		'el-table-column': TableColumn, // 表格列
		'el-tab-pane': TabPane, // 标签页
		'el-collapse': Collapse, // 折叠面板
		'el-collapse-item': CollapseItem, // 折叠面板列
		'el-tag': Tag, // 标签
		'el-divider': Divider, // 分割线
		'el-tabs': Tabs, // 标签
		systemDialog, // 系统管理
		appDialog, // 应用管理
		projectDialog, // 项目管理
		organizationDialog, // 组织机构
		appCenterDialog // 应用中心
  },
	data() {
		return {
			dynamicTags: ['中煤易购系统', 'ERP系统', '集团双创系统', 'OA系统'],
			systemAuthorizationData: [], // 系统管理数据
			appAuthorizationData: [], // 应用管理数据
			organizationAuthorizationData: [], // 组织管理数据
			appCenterAuthorizationData: [], // 应用中心数据
			dialogSystemVisible: false, // 是否显示系统管理弹框
			dialogAppVisible: false, // 是否显示应用管理弹框
			dialogProjectVisible: false, // 是否显示项目管理弹框
			dialogOrganizationVisible: false, // 是否显示组织管理弹框
			dialogAppCenterVisible: false, // 是否显示应用中心弹框
			systemIds: [], // 获取到所有系统roleId
			userGroupId: '', // 路由获取到的userGroupId
			organizationDialogKey: 1,
		}
	},
	mounted() {
		this.systemAuthorizationEvent()
		this.appAuthorizationEvent()
		this.organizationAuthorizationEvent()
		this.appCenterAuthorizationEvent()
		// this.userGroupId = this.$route.params.userGroupId
		// console.log(this.userGroupId)
	},
	methods: {
		// 获取系统管理授权数据
		systemAuthorizationEvent () {
      userGroupRoleLis(this.$route.params.userGroupId , 'f4054c5b9a984bf9ac53cea640d78b43').then(res => {
				// console.log(res.data.data)
				this.systemAuthorizationData = res.data.data
				this.systemAuthorizationData.forEach(e => {
					// console.log(e.roleId)
					this.systemIds.push(e.roleId)
				})
			})
		},
		// 获取应用管理授权数据
    appAuthorizationEvent () {
      userGroupRoleLis(this.$route.params.userGroupId, 'e1bcb98e15bd42cfa69839657ae7bb93').then(res => {
				// console.log(res.data.data)
				this.appAuthorizationData = res.data.data
			})
		},
		// 获取组织管理授权数据
		organizationAuthorizationEvent () {
      userGroupRoleLis(this.$route.params.userGroupId, '572fe77cca7649319ca2e324fae0779a').then(res => {
				// console.log(res.data.data)
				this.organizationAuthorizationData = res.data.data
			})
		},
		// 获取应用中心授权数据
		appCenterAuthorizationEvent () {
      getSysList(this.$route.params.userGroupId, 'de92d052cfe84aaca3b8752e235bdb69').then(res => {
				// console.log(res.data.data)
				this.appCenterAuthorizationData = res.data.data
			})
		},
		handleClose (tag) {
     this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
		},
		// 删除系统管理名称tag
		handleSystemClose (tag) {
			// let id = this.$route.params.userGroupId
			userGroupDataAuthDelete({
				authIds: [tag],
				id: this.$route.params.userGroupId,
				type: 'f4054c5b9a984bf9ac53cea640d78b43'
			}).then(res => {
				if (res.data.code === 10000) {
					Message.success('删除成功')
					this.systemAuthorizationEvent()
				}
			})
		},
		// 删除应用管理名称tag
		handleAppClose(tag) {
			// this.appAuthorizationData.splice(this.appAuthorizationData.indexOf(tag), 1)
			userGroupDataAuthDelete({
				authIds: [tag],
				id: this.$route.params.userGroupId,
				type: 'e1bcb98e15bd42cfa69839657ae7bb93'
			}).then(res => {
				if (res.data.code === 10000) {
					Message.success('删除成功')
					this.appAuthorizationEvent()
				}
			})
		},
		// 删除组织管理名称tag
		handleOrganizationClose (tag) {
			// this.organizationAuthorizationData.splice(this.organizationAuthorizationData.indexOf(tag), 1)
			userGroupDataAuthDelete({
				authIds: [tag],
				id: this.$route.params.userGroupId,
				type: '572fe77cca7649319ca2e324fae0779a'
			}).then(res => {
				if (res.data.code === 10000) {
					Message.success('删除成功')
					this.organizationAuthorizationEvent()
				}
			})
		},
		// 删除应用中心名称tag
		handleAppCenterClose (tag) {
      userGroupDataAuthDelete({
				authIds: [tag],
				id: this.$route.params.userGroupId,
				type: 'de92d052cfe84aaca3b8752e235bdb69'
			}).then(res => {
				if (res.data.code === 10000) {
					Message.success('删除成功')
					this.appCenterAuthorizationEvent()
				}
			})
		},
		// 系统管理新增弹出确定得到数据
		getCheckoutSystemData () {
			this.systemAuthorizationEvent()
		},
		// 项目管理新增弹出确定得到数据
		getCheckoutProjectData (data) {
      console.log(data)
		},
		// 应用管理新增弹出确定得到数据
		getCheckoutAppData () {
			this.appAuthorizationEvent ()
		},
		// 应用中心新增弹出确定得到数据
		dialogHideAppCenterData () {
			this.appCenterAuthorizationEvent ()
		},
		// 新增系统管理
		addSystem () {
			this.dialogSystemVisible = true
		},
		// 新增应用管理
		addApp () {
			this.dialogAppVisible = true
		},
		// 新增项目管理
		addProject () {
      this.dialogProjectVisible = true
		},
		// 新增组织管理
		addOrganization () {
      this.dialogOrganizationVisible = true
		},
    // 新增应用中心
		addAppCenter () {
      this.dialogAppCenterVisible = true
		},
		// 关闭系统管理弹框事件
		dialogHandleSystem () {
			this.dialogSystemVisible = false
		},
		// 关闭应用管理弹框
		dialogHandleApp () {
			this.dialogAppVisible = false
		},
		// 关闭项目管理弹框事件
		dialogHandleProject () {
      this.dialogProjectVisible = false
		},
		// 关闭组织管理弹框
		dialogHandleOrganization () {
			this.organizationAuthorizationEvent()
			this.dialogOrganizationVisible = false
			setTimeout(() => {
				this.organizationDialogKey++
			}, 300);
		},
		// 关闭应用中心弹框
		dialogHandleAppCenter () {
			this.appCenterAuthorizationEvent()
      this.dialogAppCenterVisible = false
		},
		// 授权关闭按钮
		authorizationClose () {
      this.$router.go(-1) // 返回上一页
		}
	}
}
</script>
<style lang="scss" scoped>
.userAuthoriztion{
	background-color: #ffffff;
	position: relative;
	.footer {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: right;
		background: #ffffff;
		// border-top: 1px solid #DCDFE6;
		.btns {
			margin-right: 20px;
		}
	}
}
</style>

<style lang="scss">
.tabs {
	padding-bottom: 45px;
  .el-tabs__header {
		margin: 0;
	}
}
.el-tag + .el-tag {
	margin-left: 10px;
}
.boxCard{
	border: none;
	box-shadow: none;
	.el-card__header{
		border-bottom: none;
	}
	.el-card__body{
    padding-top: 0;
	}
	.tag{
		margin: 10px 0 0 8px;
		cursor: pointer;
	}
}
.boxCard.is-always-shadow{
  -webkit-box-shadow: none; 
  box-shadow: none;
}
.el-divider{
	background-color: #ffffff;
	border-bottom: 1px dashed #DCDFE6
}
.el-divider.el-divider--horizontal {
	margin: 0;
}
</style>